<template>
    <div class="publish-container">
        <AppHeader :user="user" :handleLogout="handleLogout" />

        <div class="publish-content-wrapper">
            <div class="publish-header">
                <div class="publish-title-section">
                    <span class="title-icon">?</span>
                    <h2>提出问题</h2>
                </div>
                <router-link to="/" class="back-link">&lt; 返回问题类型</router-link>
            </div>

            <div class="form-card">
                <form @submit.prevent="handleSubmit">
                    <div class="form-group title-group">
                        <label for="title">问题标题</label>
                        <input type="text" v-model="title" id="title" placeholder="提出一个 API 与组件相关的问题" required
                            maxlength="50" />
                        <span class="char-count">{{ title.length }}/50</span>
                    </div>

                    <div class="form-group content-group">
                        <div class="toolbar">
                            <button type="button" class="toolbar-btn">B</button>
                            <button type="button" class="toolbar-btn"><i class="fas fa-pencil-alt"></i></button>
                            <button type="button" class="toolbar-btn">&lt;/&gt;</button>
                            <button type="button" class="toolbar-btn"><i class="fas fa-link"></i></button>
                            <button type="button" class="toolbar-btn"><i class="fas fa-image"></i></button>
                            <button type="button" class="toolbar-btn"><i class="fas fa-video"></i></button>
                        </div>
                        <textarea v-model="content"
                            placeholder="将API/组件名称、微信版本号、基础库版本号等有效信息尽可能详细地描述，有助于问题被快速解答。服务端API问题，请提供回包的rid值，不要填写明文的appsecret、access_token、openid等敏感信息。"
                            required></textarea>
                    </div>

                    <div class="form-group tags-group">
                        <label for="tags">问题标签</label>
                        <input type="text" id="tags" placeholder="添加合适的标签有助于问题被解答" />
                    </div>

                    <button type="submit" class="submit-button">发表</button>
                </form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import AppHeader from '../components/AppHeader.vue'; // 导入AppHeader组件

const router = useRouter();
const user = ref(JSON.parse(localStorage.getItem('user') || 'null'));
const title = ref('');
const content = ref('');

const handleLogout = () => {
    localStorage.removeItem('user');
    router.push('/login');
};

const handleSubmit = async () => {
    try {
        await axios.post('/api/questions', {
            title: title.value,
            content: content.value
        }, {
            headers: {
                Authorization: 'Bearer ' + user.value.token
            }
        });
        alert('问题发布成功！');
        router.push('/'); // 发布成功后跳转回首页
    } catch (error) {
        alert(error.response?.data?.msg || JSON.stringify(error.response?.data) || '发布失败');
    }
};
</script>

<style scoped>
.publish-container {
    min-height: 100vh;
    background-color: #f5f5f5;
}

.publish-content-wrapper {
    max-width: 70%;
    margin: 20px 15% 0 15%;
    /* 顶部20px，左右15%，底部0 */
    padding: 0;
    /* 内部内容由子元素控制 */
    background-color: #ffffff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    overflow: hidden;
    /* 确保子元素的圆角生效 */
}

.publish-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.2rem 2.8rem 1.2rem 2.8rem;
    /* 顶部，左右，底部内边距 */
    border-bottom: 1px solid #f0f0f0;
}

.publish-title-section {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background-color: #ffcc00;
    /* 黄色背景 */
    color: #fff;
    /* 白色问号 */
    font-size: 1.4rem;
    font-weight: bold;
    border-radius: 50%;
    /* 圆形 */
    box-shadow: 0 2px 6px rgba(255, 204, 0, 0.3);
}

.publish-header h2 {
    font-size: 1.8rem;
    color: #333;
    font-weight: 600;
    margin: 0;
}

.back-link {
    font-size: 0.9rem;
    color: #999;
    text-decoration: none;
    transition: color 0.2s ease;
}

.back-link:hover {
    color: #07c160;
}

.form-card {
    padding: 2.5rem 2.8rem 2.8rem 2.8rem;
    /* 上右下左内边距 */
}

.form-group {
    margin-bottom: 2rem;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 0.6rem;
    font-weight: 500;
}

.form-group.title-group {
    position: relative;
}

.form-group.title-group input {
    padding-right: 60px;
}

.form-group.title-group .char-count {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: #aaa;
    background-color: #fefefe;
    /* 确保背景色和input一致 */
    padding-left: 5px;
    /* 避免文字与输入框右边框过于接近 */
}

input[type="text"],
textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #eee;
    border-radius: 6px;
    font-size: 0.9rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
    background-color: #fefefe;
}

input[type="text"]:focus,
textarea:focus {
    border-color: #07c160;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 3px rgba(7, 193, 96, 0.1);
    outline: none;
}

textarea {
    min-height: 200px;
    /* 调整高度 */
    resize: vertical;
    line-height: 1.6;
    padding-top: 1rem;
    /* 调整内边距 */
    padding-bottom: 1rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.toolbar {
    background-color: #f8f8f8;
    border: 1px solid #eee;
    border-bottom: none;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 0.5rem 1rem;
    /* 调整内边距 */
    display: flex;
    gap: 0.8rem;
    /* 调整按钮间距 */
}

.toolbar-btn {
    background: none;
    border: 1px solid transparent;
    /* 默认透明 */
    padding: 0.4rem 0.7rem;
    /* 调整内边距 */
    font-size: 0.9rem;
    color: #666;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.toolbar-btn:hover {
    background-color: #e8e8e8;
    border-color: #d0d0d0;
}

.submit-button {
    width: 120px;
    /* 固定宽度 */
    padding: 0.8rem 1.5rem;
    /* 调整内边距 */
    background-color: #07c160;
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(7, 193, 96, 0.3);
    transition: all 0.2s ease;
    display: block;
    margin: 2.5rem auto 0 auto;
    /* 调整上边距和居中 */
}

.submit-button:hover {
    background-color: #05ae56;
    box-shadow: 0 6px 15px rgba(7, 193, 96, 0.4);
}
</style>